<template>
  <div class="sample-tutorial">
    <div id="ss" style="width: 100%; height: 100%"></div>
    <div style="display: none">
      <!---->
      <img
        id="image1"
        src="Reference/folder.png"
        alt=""
        width="15"
        height="15"
      />
      <img id="image2" src="Reference/002.png" alt="" width="15" height="15" />
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      spread: null,
      disabledRemoveTable: false,
      disabledMoveTable: false,
      disabledResizeTable: false,
      moveRowValue: null,
      moveColumnValue: null,
      resizeRowValue: null,
      resizeColumnValue: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // let _this = this
      var ns = GcSpread.Sheets
      function TreeNodeCellType() {}
      TreeNodeCellType.prototype = new ns.CustomCellType()

      TreeNodeCellType.prototype.paint = function (
        ctx,
        value,
        x,
        y,
        w,
        h,
        style,
        options
      ) {
        if (!ctx) {
          return
        }
        var level = options.sheet.rowRangeGroup.getLevel(options.row)
        var nlevel = -1
        if (options.row < options.sheet.getRowCount() - 1) {
          nlevel = options.sheet.rowRangeGroup.getLevel(options.row + 1)
        }
        var hoffset = (level + 2) * 12
        x += hoffset
        // console.log(x)
        // // w -= hoffset;
        // // var image;
        // // if (nlevel > level) {
        // //     image = document.getElementById('image1');
        // // }
        // // else {
        // //     image = document.getElementById('image2');
        // // }
        // // var imageWidth = image.width, imageMagin = 3, imageLayoutWidth = imageWidth + imageMagin * 2;
        // // x += imageLayoutWidth;
        // // w -= imageLayoutWidth;
        // console.log(this)
        // console.log(arguments)
        GcSpread.Sheets.CustomCellType.prototype.paint.apply(this, [
          ctx,
          value,
          x,
          y,
          w,
          h,
          style,
          options
        ])
        if (options.row == options.sheet.getRowCount() - 1) return //last row
        // if (nlevel > level) {
        var collapsed = options.sheet.rowRangeGroup.isCollapsed(options.row + 1)
        // x -= imageLayoutWidth;
        // w += imageLayoutWidth;
        // var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
        x--
        y += h / 2 - 3
        ctx.save()
        ctx.fillStyle = 'black'
        ctx.beginPath()
        if (collapsed) {
          ctx.moveTo(x - 5, y)
          ctx.lineTo(x, y + 3)
          ctx.lineTo(x - 5, y + 6)
        } else {
          ctx.moveTo(x, y)
          ctx.lineTo(x, y + 5)
          ctx.lineTo(x - 5, y + 5)
        }
        ctx.fill()
        ctx.restore()
        // ctx.drawImage(image, imageX, imageY);
        // }
        // else {
        //     // x -= imageLayoutWidth;
        //     // w += imageLayoutWidth;
        //     // var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
        //     x--;
        //     y += h / 2 - 3;
        //     ctx.save();
        //     // ctx.drawImage(image, imageX, imageY);
        //     ctx.restore();
        // }
      }
      // override getHitInfo to allow cell type get mouse messages
      // TreeNodeCellType.prototype.paint = function(
      //   ctx,
      //   value,
      //   x,
      //   y,
      //   w,
      //   h,
      //   style,
      //   options
      // ) {
      //   x += 10
      // }
      TreeNodeCellType.prototype.getHitInfo = function (
        x,
        y,
        cellStyle,
        cellRect,
        context
      ) {
        return {
          x: x,
          y: y,
          row: context.row,
          col: context.col,
          cellStyle: cellStyle,
          cellRect: cellRect,
          sheetArea: context.sheetArea
        }
      }
      TreeNodeCellType.prototype.processMouseDown = function (hitinfo) {
        var level = hitinfo.sheet.rowRangeGroup.getLevel(hitinfo.row)
        var hoffset = (level + 2) * 12 + hitinfo.cellRect.x
        if (hitinfo.x < hoffset && hitinfo.x > hoffset - 10) {
          console.log('观察点击展开/闭合')
          var collapsed = hitinfo.sheet.rowRangeGroup.isCollapsed(
            hitinfo.row + 1
          )
          hitinfo.sheet.rowRangeGroup.setCollapsed(hitinfo.row, !collapsed)
          hitinfo.sheet.invalidateLayout()
          hitinfo.sheet.repaint()
        }
      }

      function ColorCellType() {}
      ColorCellType.prototype = new ns.TextCellType()
      ColorCellType.prototype.paintText = function (
        ctx,
        value,
        x,
        y,
        w,
        h,
        style,
        options,
        text,
        conditionalForeColor,
        opacity
      ) {
        if (!text) {
          return
        }
        ctx.save()
        ctx.beginPath()

        x += 50

        var fillStyle = style.foreColor,
          font = style.font
        if (font && ctx.font !== font) {
          ctx.font = font
        }

        var indent = 0,
          textIndent = style.textIndent,
          wordWrap = style.wordWrap,
          hAlign = style.hAlign,
          vAlign = style.vAlign,
          textDecoration = style.textDecoration,
          textAlign = 'left',
          textBaseline = 'alphabetic',
          adjX = 2,
          adjY = 2,
          textHeight = 0,
          lineHeight = options.lineHeight,
          lines = [],
          lineCount = 0,
          fontSize = options.fontInfo.fontSize

        if (textIndent > 0) {
          indent = textIndent * 8
        }

        //textAlign
        adjX += indent
        if (hAlign === ns.HorizontalAlign.center) {
          adjX = w / 2
          textAlign = 'center'
        } else if (hAlign === ns.HorizontalAlign.right) {
          adjX = w - 1 - 2 // - 2 is for the left and the right border line, - 1 is for begining from the left side of the right double line.
          adjX -= indent
          textAlign = 'right'
        }
        if (ctx.textAlign !== textAlign) {
          ctx.textAlign = textAlign
        }

        var redString, blackString
        if (text.length > 3) {
          redString = text.substring(text.length - 3, text.length)
          blackString = text.substring(0, text.length - 3)
        } else {
          redString = text
        }

        var redStart = x
        if (blackString) {
          var blackWidth = ctx.measureText(blackString).width
          redStart += blackWidth
          if (hAlign === ns.HorizontalAlign.center) {
            adjX -= blackWidth / 2
          } else if (hAlign === ns.HorizontalAlign.right) {
            adjX -= ctx.measureText(redString).width
          }
          ctx.fillStyle = 'black'
          ctx.fillText(blackString, x + adjX, y + options.lineHeight + adjY)
        }
        ctx.fillStyle = 'red'

        ctx.fillText(redString, redStart + adjX, y + options.lineHeight + adjY)
        ctx.restore()
      }

      var spread = new GcSpread.Sheets.Spread(document.getElementById('ss'))
      spread.scrollbarMaxAlign(true) // 滚动条是否对齐视图中表单的最后一行或一列
      spread.scrollbarShowMax(true) // 是否基于表单全部的行列总数显示滚动条
      spread.canUserDragDrop(false) // 用户是否能够拖拽和释放单元格
      
      spread.tabStripVisible(false)
      spread.showHorizontalScrollbar(false)
      spread.showVerticalScrollbar(false)

      var sheet = spread.getActiveSheet()
      sheet.canUserDragDrop(true) // 用户是否能够拖拽和释放单元格
      sheet.setIsProtected(true) // 表单保护
      sheet.protectionOption({
        // allowSelectLockedCells: false, // 是否允许用户选择被锁定的单元格
        // allowSelectUnlockedCells: false, // 是否允许用户选择未被锁定的单元格
        allowSort: false, // 是否允许用户排序
        allowFilter: false, // 是否允许用户筛选
        allowEditObjects: false, // 是否允许用户编辑浮动对象
        allowResizeRows: false, // 是否允许用户改变行高
        allowResizeColumns: false // 是否允许用户改变列宽
      })
      var style = new GcSpread.Sheets.Style()
      style.locked = true
      sheet.setStyle(0, -1, style)
      // 禁止编辑
      // sheet.bind(GcSpread.Sheets.Events.EditStarting, function (sender, args) {
      //   // console.log('Start cell editing.')
      //   // 判断如果是不能编辑的单元格，则执行以下代码
      //   args.cancel = true
      // })
      // // 禁止拖拽
      // sheet.bind(GcSpread.Sheets.Events.DragDropBlock, function (e, args) {
      //   // console.log('From Column:' + args.fromCol)
      //   // console.log('From Row:' + args.fromRow)
      //   // console.log('To Column:' + args.toCol)
      //   // console.log('To Row:' + args.toRow)
      //   args.cancel = true
      // })
      // console.log(sheet);
      // sheet.options.allowCellOverflow = false
      sheet.isPaintSuspended(true)
      sheet.suspendEvent()
      sheet.rowRangeGroup.direction = ns.RangeGroupDirection.Forward
      sheet.getColumn(0).cellType(new TreeNodeCellType())

      sheet.setValue(0, 0, 'Permanent Differences')
      sheet.setValue(1, 0, 'Permanent Differences')
      sheet.setValue(2, 0, '4P01 - Club Dues')
      sheet.setValue(3, 0, '4P02 - Business Gifts')
      sheet.setValue(4, 0, '4P03 - Int Inc-Muni Borads')
      sheet.setValue(5, 0, '4P04 - Lobbying Expense')
      sheet.setValue(6, 0, '4P05 - Skybox')
      sheet.setValue(7, 0, '4P06 - Stock Options-Perm')
      sheet.setValue(8, 0, '4P07 - M&E')
      sheet.setValue(9, 0, 'Total Permanent Differences')
      sheet.setValue(10, 0, 'Capital Loss Limitation')
      sheet.setValue(11, 0, 'Capital Gain/Loss, Sum included in Book income')
      sheet.setValue(12, 0, 'Capital Loss Disallowed')
      sheet.setValue(13, 0, 'Charitable Contribution Limitation')
      sheet.setValue(14, 0, 'Charitable Contributions included in Book income')
      sheet.setValue(
        15,
        0,
        'Demestic production activities deduction included in Book income'
      )
      sheet.setValue(16, 0, 'Fedeeral Taxable Income Limitation')
      sheet.setValue(17, 0, 'Limitation percentage')
      sheet.setValue(18, 0, 'Charitable Contribution limitation')
      sheet.setValue(19, 0, 'Charitable Contributions disallowed')
      sheet.setValue(
        20,
        0,
        'Federal Taxable Income before Net Operating Loss Deduction'
      )
      console.log(sheet.rowRangeGroup.group)
      sheet.rowRangeGroup.group(1, 10)
      sheet.rowRangeGroup.group(3, 8)
      // sheet.rowRangeGroup.group(6, 3)
      sheet.rowRangeGroup.group(12, 2)
      sheet.rowRangeGroup.group(15, 6)
      sheet.getColumn(0).width(300)
      sheet.showRowRangeGroup(false)

      sheet.getColumn(1).cellType(new ColorCellType())
      var A = 30
      var B = 30000
      var lev = 1
      var secondlev = 1
      for (var i = 0; i < 21; i++) {
        var level = sheet.rowRangeGroup.getLevel(i)
        if (level == -1) {
          lev = 1
          secondlev = 1
          sheet.setValue(i, 1, '---')
        } else if (level == 0) {
          sheet.setValue(i, 1, '00' + lev)
          lev++
          secondlev = 1
        } else {
          sheet.setValue(i, 1, '00' + lev + '00' + secondlev)
          secondlev++
        }

        sheet.setValue(i, 2, 'm3')
        sheet.setValue(i, 3, (500 - 1) * Math.random() + 1)
        sheet
          .getCell(i, 3)
          .formatter(
            new GcSpread.Sheets.GeneralFormatter(
              'f',
              GcSpread.Sheets.FormatMode.StandardNumericMode
            )
          )
        sheet.setValue(i, 4, (B - A) * Math.random() + A)
        sheet
          .getCell(i, 4)
          .formatter(
            new GcSpread.Sheets.GeneralFormatter(
              'f',
              GcSpread.Sheets.FormatMode.StandardNumericMode
            )
          )
        sheet.setFormula(
          i,
          5,
          '=D' + (i + 1).toString() + '*E' + (i + 1).toString()
        )
        sheet
          .getCell(i, 5)
          .formatter(
            new GcSpread.Sheets.GeneralFormatter(
              'c3',
              GcSpread.Sheets.FormatMode.StandardNumericMode
            )
          )
      }

      var h = ns.SheetArea.colHeader

      sheet.setColumnCount(6, h)
      sheet.setColumnCount(6, GcSpread.Sheets.SheetArea.viewport)

      sheet.setRowCount(2, h)

      sheet.addSpan(0, 0, 2, 1, h)
      sheet.setValue(0, 0, '任务名称', h)

      sheet.addSpan(0, 1, 2, 1, h)
      sheet.setValue(0, 1, '任务编码', h)

      sheet.addSpan(0, 2, 2, 1, h)
      sheet.setValue(0, 2, '单位', h)

      sheet.addSpan(0, 3, 1, 3, h)
      sheet.setValue(0, 3, '施工图清单', h)

      sheet.setValue(1, 3, '数量', h)
      sheet.setValue(1, 4, '单价', h)
      sheet.setValue(1, 5, '合价', h)

      sheet.getColumns(1, 4).width(100)
      sheet.getColumns(5, 5).width(150)
      sheet.setRowCount(22)
      sheet.getColumn(1).hAlign(ns.HorizontalAlign.left)

      sheet.resumeEvent()
      sheet.isPaintSuspended(false)

      // $("#btn").click(function () {
      //     var spread = $("#ss").wijspread("spread");
      //     var data = spread.toJSON();

      //     var spread1 = $("#ss1").wijspread("spread");
      //     spread1.fromJSON(data);
      //     var sheet = spread1.getActiveSheet();
      //     sheet.getColumn(0).cellType(new TreeNodeCellType());
      // });
    }
  }
}
</script>

<style scoped>
.sample-tutorial {
  position: relative;
  height: 600px;
  overflow: hidden;
}
</style>
